<template>
  <div
    class="q-px-xs q-pt-xs define-scroll"
    style="
      width: 100%;
      height: calc(100vh - 28px);
      overflow: hidden;
      display: block;
    "
  >
    <q-separator />
    {{ ticked }}
    <q-card
      @contextmenu="clickFile"
      class="overflow-auto define-scroll"
      style="height: 690px; width: 300px"
    >
      <q-input
        dense
        ref="filterRef"
        v-model="filter"
        class="q-mb-xs q-px-xs"
        label="搜索"
      >
        <template v-slot:append>
          <q-icon
            v-if="filter !== ''"
            name="clear"
            class="cursor-pointer"
            @click="resetFilter"
          />
        </template>
      </q-input>
      <q-tree
        class="q-ml-md"
        :nodes="nodes"
        node-key="path"
        no-connectors
        dense
        v-model:ticked="ticked"
        v-model:expanded="expanded"
        @lazy-load="onLazyLoad"
        :filter="filter"
        v-model:selected="selected"
        :filter-method="myFilterMethod"
        default-expand-all
        tick-strategy="leaf"
      >
        <template v-slot:default-header="prop">
          <div
            @contextmenu="clickDb"
            class="row items-center full-width"
          >
            <div
              class="text-weight text-caption text-no-wrap"
              :class="prop.node.lazy ? 'text-black' : ' text-primary'"
            >
              {{ prop.node.label }}
              <q-btn
                :label="prop.node.type.substring(1)"
                size="sm"
                class="bg-red-love text-white text-bold"
                dense
                v-if="prop.node.type"
              />
            </div>
          </div>
        </template>

        <!--        <template v-slot:default-body="prop">-->
        <!--          <div v-if="prop.node.label">-->
        <!--            <span class="text-weight-bold">This node has a story</span>: {{ prop.node.story }}-->
        <!--          </div>-->
        <!--          <span v-else class="text-weight-light text-black">This is some default content.</span>-->
        <!--        </template>-->
      </q-tree>
    </q-card>

    {{ selected }}
  </div>
</template>
<script lang="ts" setup>
import { useProjectStore } from 'stores/projectStore';
import { extname, getFilePathTree, isFile, pathJoin } from 'src/api/SysApi';
import { onMounted, ref } from 'vue';

const filter = ref('');
const ticked = ref([]);
const selected = ref([]);
const filterRef = ref(null);
const expanded = ref(['Good service (disabled node) (*)']);
const nodes = ref([]);

const clickDb = async (event) => {
  event.stopPropagation();
  await window.ipcCom.dbMenu();
};
const clickFile = async (event) => {
  console.log('fileMenu');
  event.stopPropagation();
  await window.ipcCom.fieldMenu();
};

const test = async () => {
  nodes.value = (
    await getFilePathTree(<string>useProjectStore().project.out?.path)
  ).map((i) => {
    return {
      label: i,
      path: pathJoin(<string>useProjectStore().project.out?.path, i),
      type: extname(pathJoin(<string>useProjectStore().project.out?.path, i)),
      lazy: isFile(pathJoin(<string>useProjectStore().project.out?.path, i)),
    };
  });
};
const myFilterMethod = (node, filter) => {
  const filt = filter.toLowerCase();
  return node.label && node.label.toLowerCase().indexOf(filt) > -1;
};

const resetFilter = () => {
  filter.value = '';
  filterRef.value.focus();
};
const onLazyLoad = async ({ node, key, done, fail }) => {
  console.log(node.path);
  const data = (await getFilePathTree(node.path)).map(async (i) => {
    return {
      label: i,
      path: pathJoin(node.path, i),
      type: extname(pathJoin(<string>useProjectStore().project.out?.path, i)),
      lazy: !(await isFile(pathJoin(node.path, i))),
    };
  });
  done(await Promise.all(data));
};
onMounted(() => {
  test();
});
</script>
